<template>
	<view class="beijingse">
		<u-tabs :list="list1" lineColor="#FAB536" @click="clicktabtow" :activeStyle="{
			    color: '#000000',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: '#666666',
						fontWeight: 'bold',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
		<!-- 弹框 -->
		<u-picker :show="show" :title="title" keyName="name" :columns="columns" @confirm="confirm" @cancel="show=false"
			confirmColor="#FAB536"></u-picker>
		<view class="mainpadding2">
			<!-- 内容 -->
			<view class="zwtimg flexcenter" v-if="list.total==0">
				<image src="../../static/image/system/zwt.png" mode=""></image>
			</view>
			<view class="ffffff mainpadding radius margin_top" v-if="list.total!=0" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="haungfz margin_right1"></view>
						<view class="titletext margin_right2">{{item.shop.name}}</view>
						<view class="righticon"></view>
					</view>
					<!-- 普通订单 -->
					<view class="hongsetext" v-if="item.state==1 && currenttabtow!=4">待付款</view>
					<view class="huangsetext" v-if="item.state==2 && currenttabtow!=4">待发货</view>
					<view class="huangsetext" v-if="item.state==3 && currenttabtow!=4">待收货</view>
					<view class="huangsetext" v-if="item.state==4 && currenttabtow!=4">待评价</view>
					<view class="lvsetext" v-if="item.state==6 && currenttabtow!=4">已完成</view>
					<view class="huangsetext" v-if="item.state==7 && currenttabtow!=4">已取消</view>
					<!-- 退货售后 -->
					<view class="huangsetext" v-if="item.state==4 && currenttabtow==4">换货成功</view>
					<view class="hongsetext" v-if="item.state==8 && currenttabtow==4">换货失败</view>
					<view class="huangsetext" v-if="item.state==1 && currenttabtow==4">寄回商品</view>
					<view class="hongsetext" v-if="item.state==2 && currenttabtow==4">卖家拒绝</view>
					<view class="huangsetext" v-if="item.state==0 && currenttabtow==4">审核中</view>
					<view class="huangsetext" v-if="item.state==6 && currenttabtow==4">商品退回中</view>
				</view>
				<view class="flexbetween xiahuax margin_top" v-for="(ite,index) in item.goods" :key="index"
					@click="tzddxq(item)">
					<view class="shilitu">
						<image :src="ite.image_text" mode=""></image>
					</view>
					<view class="" style="width: 74%;">
						<view class="ershib xiankuan">{{ite.title}}</view>
						<view class="flexbetween margin_top1">
							<view class="qianshu">¥{{item.buy_type==1?ite.price:ite.fl_price}}</view>
							<view class="shuliang">*{{ite.number}}</view>
						</view>
					</view>
				</view>
				<!-- 福利商品区 -->
				<view class="flexright margin_top">
					<!-- <view class="nostrongtext">福利商品区</view> -->

					<view class="nostrongtext">共计{{item.goods.length}}件商品 合计
						<text class="ershisi" v-if="currenttabtow!=4">￥{{item.total_price}}</text>
						<text class="ershisi" v-if="currenttabtow==4">￥{{item.price}}</text>
					</view>
				</view>
				<!-- 所有按钮 -->
				<view class="flexright margin_top" v-if="currenttabtow!=4">
					<!-- 取消订单 -->
					<view class="huisebtn" @click="cancelorder(item.id)" v-if="item.state==1">取消订单
					</view>
					<!-- 立即支付 -->
					<view class="huangsebtn marginleft3" v-if="item.state==1" @click="atoncepay(item)">立即支付</view>
					<!-- 查看物流 -->
					<!-- <view class="marginleft3 huisebtn" @click="tzckwl " v-if="item.state==3">查看物流</view> -->
					<!-- 确认收货 -->
					<view class="huangsebtn marginleft3" v-if="item.state==3" @click="suresh(item)">确认收货</view>
					<!-- 立即评价 -->
					<!-- <view class="huangsebtn" @click="tzfbpj(item.id)" v-if="item.state==4">立即评价</view> -->
					<!-- 删除订单 -->
					<view class="huisebtn" v-if="item.state==7 || item.state==6" @click="deletorder(item.id)">删除订单
					</view>
				</view>
				<view class="flexright margin_top" v-if="currenttabtow==4">
					<!-- 删除订单 -->
					<!-- <view class="huisebtn" v-if="item.state==4" @click="deletorder(item.id)">删除记录</view> -->
					<view class="huangsebtn marginleft3" @click="tzddxq(item)">查看详情</view>
					<!-- 确认收货 -->
					<!-- <view class="huangsebtn marginleft3" v-if="item.state==3 || item.state==2 " @click="suresh(item)">确认收货</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				title: "选择取消理由",
				columns: [],
				currenttabtow: 0, //0全部，1待付款，2代发货，3待收货，4退货售后
				list1: [{
						name: '全部',
					},
					{
						name: '待付款',
					},
					{
						name: '待发货',
					},
					{
						name: '待收货',
					},
					{
						name: '退货/售后',
					}
				],
				order_id: "",
				page: 1,
				limit: 12,
				list: {
					data: [{
						address_id: 0,
						buy_type: 2,
						cancelyy: null,
						coupon_id: 0,
						createtime: 1673426088,
						createtime_text: "",
						dealtime: null,
						dealtime_text: "",
						deletetime: null,
						delivertime: null,
						delivertime_text: "",
						express_name: null,
						express_no: null,
						fl_price: null,
						freight_price: "20.00",
						freight_type: 1,
						goods: [{
							difference: "黑色,41",
							fl_price: "400.00",
							goods_id: 3,
							id: 32,
							image: "",
							image_text: "",
							market_price: "",
							number: 1,
							price: "",
							refund_status: "",
							title: "",
						}],
						goods_num: 1,
						id: 34,
						integral_price: "0.00",
						isaddress: 0,
						order_no: "",
						order_pay_no: "",
						pay_price: "",
						pay_status: "",
						pay_time: null,
						pay_type: "",
						paymenttime: null,
						paymenttime_text: "",
						remarks: "",
						shop: {
							create_time_text: "",
							like: 2,
							logo_text: "",
							name: "",
							service_text: "",
							status_text: "",
							update_time_text: "",
						},
						shop_id: 1,
						state: 1,
						status: "",
						taketime: null,
						taketime_text: "",
						total_price: "",
						updatetime: 0,
						user_id: 4,
					}, ]
				},
				showType: false

			}
		},
		onLoad() {
			this.getliyou()
		},
		onShow() {
			this.init()
		},
		methods: {
			// 订单取消理由
			getliyou() {
				httpRequest.request('/api/order/orderCancelly', 'POST', {}, false, false, true).then(res => {
					this.columns.push(res.data)
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				if (!isPage) {
					this.list = {}
				}
				let _this = this;
				let url = ""
				let data = {
					page: page || 1,
					limit: _this.limit,
					state: this.currenttabtow,
					buy_type: 1
				}
				if (this.currenttabtow == 4) {
					url = "/api/order/refundList"
					delete data.state
					// delete data.buy_type
				} else {
					url = "/api/order/getOrderList"
				}
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (this.currenttabtow == 4) {
							res.data.data.forEach(item => {
								let arr = item.goods
								delete item.goods
								this.$set(item, "goods", [])
								item.goods.push(arr)
							})
						}
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = JSON.parse(JSON.stringify(res.data))
							_this.list.data = JSON.parse(JSON.stringify(resList.data));
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 立即支付
			atoncepay(item) {
				let obj = {
					buy_type: 1,
					order_pay_no: item.order_pay_no,
					pay_price: item.pay_price,
				}
				uni.navigateTo({
					url: '/pages/homepage/querenddzhzf?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 确认收货
			suresh(item) {
				httpRequest.modal('提示', '请再次确认', true, (res) => {
					if (res) {
						httpRequest.request('/api/order/confirmOrder', 'POST', {
							id: item.id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// 跳转申请换货
			tzsqtk() {
				uni.navigateTo({
					url: '/pages/mypage/shenqtk'
				})
			},
			// 跳转立即评价
			tzfbpj(id) {
				uni.navigateTo({
					url: '/pages/mypage/fabiaoqj?id=' + id
				})
			},
			// 跳转查看物流
			tzckwl() {
				uni.navigateTo({
					url: '/pages/mypage/wuliuxq'
				})
			},
			// 跳转订单详情
			tzddxq(item) {
				if (this.currenttabtow != 4) {
					uni.navigateTo({
						url: '/pages/mypage/dingdanxq?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/mypage/dingdanxqtk?id=' + item.id
					})
				}

			},
			cancelorder(id) {
				this.order_id = id
				this.show = true
			},
			// 取消订单
			confirm(e) {
				httpRequest.request('/api/order/cancelOrder', 'POST', {
					order_id: this.order_id,
					cancelyy_id: e.value[0].id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						this.init()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				this.show = false
			},
			// 删除订单
			deletorder(id) {
				httpRequest.modal('提示', '确定删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/order/delOrder', 'POST', {
							id: id,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.init()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			clicktabtow(e) {
				this.currenttabtow = e.index;
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huangsebtn {
		border: 2rpx solid #FAB536;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
	}

	.huisebtn {
		border: 2rpx solid #666666;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.ershisi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.shuliang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.qianshu {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FAB536;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.shilitu {
		width: 134rpx;
		height: 128rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.lvsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #00C058;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.hongsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF0000;
	}

	.marginleft3 {
		margin-left: 30rpx;
	}
</style>
